<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" user-scalable=no>
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>交易详情</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    
        html {
            font-size: 62.5%;
        }
    
        img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }
    
        .main {
            width: 95%;
            margin: 20px auto;
            background: #F2F1F6;
            height: 600px;
            font-family: PingFangSC-Regular;
            border-radius: 6px;
            box-shadow: 0 1px 5px #E8E5EE;
        }
    
        .back {
            width: 100px;
            float: right;
            margin-top: 20px;
            color: rgba(0, 0, 0, 0.4);
        }
    
        .service {
            clear: both;
            margin: 0 auto;
        }
    
        .service img {
            width: 42.2px;
            height: 42.2px;
        }
    
        .line {
            color: rgba(0, 0, 0, 0.2);
            margin-top: 15px;
            margin-bottom: 30px;
            height: 20px;
            overflow: hidden;
        }
    
        .words {
            display: block;
            margin-top: 20px;
            color: black;
            font-weight: bold;
        }
    
        .wordsData {
            display: block;
            margin-top: 10px;
            color: rgba(0, 0, 0, 0.4);
        }
    
        .content {
            width: 86%;
            height: 500px;
            margin: 0 auto;
            padding: 0 2px 0 2px;
            text-align: left
        }
    
        .item {
            height: 55px;
            width: 100%;
            display: flex;
        }
    
        .itemLeft {
            width: 25%;
            line-height: 19px;
            font-size: 12px;
            color: #979797;
            letter-spacing: -0.05px;
        }
    
        .itemRight {
            height: 50px;
            text-align: left;
            width: 152px;
            word-break: break-all;
            font-size: 11px;
            color: #222222;
            letter-spacing: -0.15px;
        }
    
    
    
        .clone {
            float: right;
            margin-right: -4%;
            margin-top: 11px;
            color: rgba(0, 0, 0, 0.4)
        }
    
        .cloneImg {
            width: 12px;
            vertical-align: middle;
        }
    
        .cloneWords {
            font-size: 10px;
            vertical-align: middle;
            color: #CACACA;
            letter-spacing: -0.04px;
    
        }
    
        .marginTop {
            margin-top: 10px;
            margin-bottom: 16.5px
        }
    
        .cloneWords_1 {
            font-size: 10px;
            vertical-align: middle;
            color: #CACACA;
            letter-spacing: -0.04px;
        }
    
        .clone_1 {
            width: 20%;
            margin-left: -10%;
        }
    
        .itemRight {
            font-size: 11px;
            color: #222222;
            letter-spacing: -0.15px;
        }
    
        .item_1 {
            display: flex;
        }
    
        .center {
            text-align: center;
        }
    
        .colorBold {
            font-weight: bold;
            font-size: 16px;
        }
    </style>
</head>


<body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./vue.min.js"></script>
    <script src="./set.js"></script>
    <div id="wrapp">
        <div class="main">
            <div class="back" @click="back">返回&nbsp;&nbsp;&nbsp;></div>
            <div class="service center ">
                <img src="./assets/weixinSuccuse.png" alt="">
            </div>
            <span class="words center">交易成功</span>
            <span class="wordsData center">{{showData.timeStamp | timestampToTime}}</span>
            <div class="line center">
                -------------------------------------------------------------
            </div>
            <div class="content">
                <div class="item">
                    <span class="itemLeft">金额:</span>
                    <span class="itemRight colorBold" v-if="type==='plc'">{{showData.value | jingdu}} <span>{{type}}</span></span>
                    <span class="itemRight colorBold" v-else>{{showData.value | jingdu_1}} <span>{{type}}</span></span>
                </div>
                <div class="item">
                    <span class="itemLeft">收款地址:</span>
                    <span class="itemRight">{{showData.to}}</span>
                    <!-- <div class="clone">
                        <img src="./assets/copy.png" alt="" class="cloneImg">
                        <span class="cloneWords" id='get'  
                        v-clipboard:copy="showData.to"
                        v-clipboard:success="onCopy"
                        v-clipboard:error="onError">复制</span>
                    </div> -->
                </div>
                <div class="item">
                    <span class="itemLeft">付款地址:</span>
                    <span class="itemRight">{{showData.from}}</span>
                    <!-- <div class="clone">
                        <img src="./assets/copy.png" alt="" class="cloneImg">
                        <span class="cloneWords">复制</span>
                    </div> -->
                </div>
                <!-- <div class="item">
                    <span class="itemLeft">备注:</span>
                    <span class="itemRight">{{}}</span>
                </div>
                <span class="wordsData center">{{showData.timeStamp | timestampToTime}}</span>
                <div class="line marginTop center">
                    -------------------------------------------------------------
                </div>
                <div class="item_1">
                    <span class="itemLeft">交易号:</span>
                    <span class="itemRight">{{}}</span>
                    <div class="clone_1">
                        <img src="./assets/copy.png" alt="" class="cloneImg">
                        <span class="cloneWords_1">复制</span>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
    <script>
        let app = new Vue({
            el: "#wrapp",
            data: {
                data: { time: "2018年9月19日", value: "0.12156", storj: "storj", getMoneyAddr: "2dca44c0b48f5dd9dc2b16ca06dea4bf6517688e", payMoneyAddr: "2dca44c0b48f5dd9dc2b16ca06dea4bf6517688e", remarks: "风风贼鸡儿帅" },
                exchangeNum: "2dca44c0b48f5dd9d",
                type: 'storj',
                showData: {},
                index: '',
                exchangeDataStorj: [],
                exchangeDataPLC: [],
                exchangeDataFIL: [],
                session: '',
                wholeData: [],
                value_storj: '',
                value_plc: '',
                value_fil: '',
                walletAddress: ''
            },
            mounted() {
                console.log(this.type)
                this.loadData();
            },
            created() {
                // this.session = this.parseURL().session;
                this.type = this.parseURL().type;
                console.log(this.type);
                this.index = this.parseURL().id;
                this.session = this.parseURL().session;
                this.walletAddress = this.parseURL().walletAddress
            },
            filters: {
                timestampToTime: function (timestamp) {
                    timestamp = parseInt(timestamp)
                    var date = new Date(timestamp);
                    Y = date.getFullYear();
                    M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
                    D = date.getDate();
                    h = date.getHours() + ':';
                    m = date.getMinutes() + ':';
                    s = date.getSeconds();
                    return Y + '年' + M + '月' + D + '日';
                },
                jingdu: function (num) {
                    num = parseInt(num);
                    num = num * Math.pow(10, -18);
                    return num;
                },
                jingdu_1: function (num) {
                    num = parseInt(num);
                    num = num * Math.pow(10, -8);
                    return num;
                }
            },
            methods: {
                back() {
                    window.location.href = appUrl + "checkWalletAddress.html?session=" + this.session + '&wallet=' + this.walletAddress;
                },
                loadData() {
                    axios({
                        method: "get",
                        url: "https://api.etherscan.io/api?module=account&action=tokentx&address=" + this.walletAddress + "&startblock=0&endblock=999999999&sort=asc&apikey=HUFI49TF2AUYIUBNAIKUJPRGAE6PZG93EC",
                    }).then(res => {
                        if (res.status == 200) {
                            this.wholeData = res.data.result;
                            this.showData = {};
                            if (this.wholeData) {
                                let index = this.wholeData.length;
                                for (let i = 0; i < index; i++) {
                                    if (this.wholeData[i].tokenSymbol == 'STORJ') {
                                        this.exchangeDataStorj.push(this.wholeData[i]);
                                        console.log("我是storj")
                                    } else if (this.wholeData[i].contractAddress == '0x031be1616b56ad0238bca275b7b0f6ec533676b5') {
                                        this.exchangeDataPLC.push(this.wholeData[i]);
                                        console.log('我是PLC')
                                    } else if (this.wholeData[i].tokenSymbol == 'FIL') {
                                        console.log('我是FIL')
                                        this.exchangeDataFIL.push(this.wholeData[i]);
                                    } else {
                                        console.log('什么都没有获取到')
                                    }
                                }
                            }
                            this.index = parseInt(this.index);
                            if (this.type === 'storj') {
                                this.showData = this.exchangeDataStorj[this.index];
                            } else if (this.type === 'fil') {
                                this.showData = this.exchangeDataFIL[this.index];
                            } else if (this.type === 'plc') {
                                console.log(this.exchangeDataStorj[this.index])
                                this.showData = this.exchangeDataPLC[this.index];
                            } else {
                            };
                            this.type = '';
                        }
                    })
                        .catch(err => {
                            // alert('网络连接错误');

                        });
                },

                parseURL: function (_url) {
                    let queryString = '';
                    let url = _url || location.href;
                    let index = url.lastIndexOf('?');
                    let map = {};
                    /* 如果当前 url 没有 query-string*/
                    if (index > -1) {
                        let queryString = url.slice(index).split('?')[1];
                        queryString.split('&').forEach(function (item) {
                            let t = item.split('=');
                            map[t[0]] = t[1];
                        });
                    }
                    return map;
                },
            }
        })
    </script>
</body>

</html>